<template>
  <div class="app-container">
    <div class="head">
      <img src="@/assets/img/Layout/position.png" />
      <p class="see-block">{{ type == 'user' ? '客户详情' : type == 'supplier' ? '供应商详情' : type == 'product' ? '产品详情' : '' }}</p>
    </div>
    <div class="view-container">
      <template v-if="type == 'user'">
        <el-row class="status-title">
          <el-col class="mr20 width100" v-if="data.approvalStatus == 1">
              <el-button
                  class="btn-default width100"
                  type="primary"
                  @click="userAudit()"
                  v-hasPermi="['system:customerInformation:check']"
              >审核</el-button>
          </el-col>
          <el-col class="mr20 width100" v-if="data.approvalStatus == 2">
              <el-button
                  class="btn-audit width100"
                  type="primary"
                  @click="userReverseAudit()"
                  v-hasPermi="['system:customerInformation:uncheck']"
              >反审核</el-button>
          </el-col>
          <el-col class="mr20 width100" v-if="data.approvalStatus == 0 || data.approvalStatus == 3">
              <el-button
                  class="btn-default width100"
                  type="primary"
                  @click="userEdit()"
                  v-hasPermi="['system:customerInformation:update']"
              >编辑</el-button>
          </el-col>
          <!-- <el-col class="mr20 width100" v-if="data.approvalStatus == 0">
              <el-button
                  class="btn-delete width100"
                  type="primary"
                  @click="userDelete()"
                  v-hasPermi="['system:customerInformation:deleteById']"
              >删除</el-button>
          </el-col> -->
          <el-col class="mr20 width100" v-if="data.status == 0 && data.approvalStatus == 2">
              <el-button
                  class="btn-enable width100"
                  type="primary"
                  @click="userEnable()"
                  v-hasPermi="['system:customerInformation:disable']"
              >启用</el-button>
          </el-col>
          <el-col class="mr20 width100" v-if="data.status == 1 && data.approvalStatus == 2">
              <el-button
                  class="btn-delete width100"
                  type="primary"
                  @click="userDisable()"
                  v-hasPermi="['system:customerInformation:disable']"
              >禁用</el-button>
          </el-col>
          <el-col :span="10" class="status-container">
            <div class="status-item">
              <span :class="{ 'active' : data.approvalStatus == 1 }">待审核</span>
              <span :class="{ 'active' : data.approvalStatus == 2 }">已审核</span>
              <span :class="{ 'active' : data.approvalStatus == 3 }">拒绝</span>
            </div>
          </el-col>
        </el-row>
        <ul class="tabs mt30">
        <!-- <ul class="tabs"> -->
          <li @click="current = 0" :class="{ active: current === 0 }">基础资料</li>
          <li @click="current = 1" :class="{ active: current === 1 }">证件管理</li>
          <li @click="current = 2" :class="{ active: current === 2 }">开票信息</li>
        </ul>
        <div v-show="current === 0">
          <el-row class="detail-item">
            <el-col :span="8">
                <span>客户代码：</span>{{ data.code ?  data.code : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>客户全称：</span>{{ data.name ?  data.name : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>英文名称：</span>{{ data.englishName ?  data.englishName : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>客户简称：</span>{{ data.abbreviation ?  data.abbreviation : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>组织机构代码：</span>{{ data.agencyCode ?  data.agencyCode : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>法人：</span>{{ data.legalPerson ?  data.legalPerson : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>联系人：</span>{{ data.contact ?  data.contact : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>联系电话：</span>{{ data.contactNumber ?  data.contactNumber : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>电子邮箱：</span>{{ data.mail ?  data.mail : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>销售区域：</span>{{ data.salesArea ?  data.salesArea : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>客户分类：</span>{{ data.customerSortId ?  data.customerSortId : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>行业类型：</span>{{ data.industryType ?  data.industryType : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>币种：</span>{{ data.currency ?  data.currency : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>客户来源：</span>{{ data.customerSource ?  data.customerSource : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>销售员：</span>{{ data.seller ?  data.seller : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>价格清单：</span>{{ data.priceList ?  data.priceList : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>运输方式：</span>{{ data.transport ?  data.transport : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>付款条件：</span>{{ data.paymentTerms ?  data.paymentTerms : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>收货人：</span>{{ data.consignee ?  data.consignee : '暂无'}}
            </el-col>
            <el-col :span="16">
                <!-- <span>收货地址：</span>{{ data.shippingAddress ?  data.shippingAddress : '暂无'}} -->
                <span>收货地址：</span>{{ data.province ?  data.province + data.city + data.region + data.shippingAddress : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>状态：</span>
                <!-- {{ data.status == '1' ?  '正常' : '禁用'}} -->
                <font v-if="data.status == 0" style="color:#fd562c">禁用</font>
                <font v-if="data.status == 1" style="color:#52C41A">正常</font>
            </el-col>
          </el-row>
        </div>
        <div v-show="current === 1">
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">营业执照</div>
              <div class="avatar-uploader">
                <div v-if="typeList1">
                  <img v-if="typeList1.fileType == '.jpg' || typeList1.fileType == '.png' || typeList1.fileType == '.gif' || typeList1.fileType == '.bmp' || typeList1.fileType == 'jpeg'" :src="typeList1.fileUrl" class="avatar">
                  <span v-else>{{ typeList1.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList1.startTime ? typeList1.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList1.endTime ? typeList1.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">年度报告</div>
              <div class="avatar-uploader">
                <div v-if="typeList2">
                  <img v-if="typeList2.fileType == '.jpg' || typeList2.fileType == '.png' || typeList2.fileType == '.gif' || typeList2.fileType == '.bmp' || typeList2.fileType == 'jpeg'" :src="typeList2.fileUrl" class="avatar">
                  <span v-else>{{ typeList2.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList2.startTime ? typeList2.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList2.endTime ? typeList2.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">医疗器械经营许可证</div>
              <div class="avatar-uploader">
                <div v-if="typeList3">
                  <img v-if="typeList3.fileType == '.jpg' || typeList3.fileType == '.png' || typeList3.fileType == '.gif' || typeList3.fileType == '.bmp' || typeList3.fileType == 'jpeg'" :src="typeList3.fileUrl" class="avatar">
                  <span v-else>{{ typeList3.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList3.startTime ? typeList3.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList3.endTime ? typeList3.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">质量保证协议</div>
              <div class="avatar-uploader">
                <div v-if="typeList4">
                  <img v-if="typeList4.fileType == '.jpg' || typeList4.fileType == '.png' || typeList4.fileType == '.gif' || typeList4.fileType == '.bmp' || typeList4.fileType == 'jpeg'" :src="typeList4.fileUrl" class="avatar">
                  <span v-else>{{ typeList4.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList4.startTime ? typeList4.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList4.endTime ? typeList4.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
        </div>
        <div v-show="current === 2">
          <el-row class="detail-item">
            <el-col :span="8">
              <span>公司名称（中文）：</span>{{ customerInformationInvoice.name ?  customerInformationInvoice.name : '暂无'}}
            </el-col>
            <el-col :span="8">
              <span>公司名称（英文）：</span>{{ customerInformationInvoice.enName ?  customerInformationInvoice.enName : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="24">
              <span>公司注册地址：</span>{{ customerInformationInvoice.registeredAddressCountry ?  customerInformationInvoice.registeredAddressCountry : '暂无'}}{{ customerInformationInvoice.registeredAddressProvince ? customerInformationInvoice.registeredAddressProvince : '' }}{{ customerInformationInvoice.registeredAddressCity ? customerInformationInvoice.registeredAddressCity : '' }}{{ customerInformationInvoice.registeredAddressRegion ? customerInformationInvoice.registeredAddressRegion : '' }}{{ customerInformationInvoice.registeredAddressDetailed ? customerInformationInvoice.registeredAddressDetailed : '' }}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="24">
              <span>纳税人类型：</span>{{ customerInformationInvoice.taxpayerType == '0' ? '增值税一般纳税人' : customerInformationInvoice.taxpayerType == '1' ? '增值税小规模纳税人' : customerInformationInvoice.taxpayerType == '2' ? '营业纳税人' : '暂无' }}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="24">
              <span>纳税类型比例：</span>{{ customerInformationInvoice.taxpayerScale == '0' ? '13%' : customerInformationInvoice.taxpayerScale == '1' ? '9%' : customerInformationInvoice.taxpayerScale == '2' ? '6%' : customerInformationInvoice.taxpayerScale == '3' ? '3%' : customerInformationInvoice.taxpayerScale == '4' ? '1%' : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>电话：</span>{{ customerInformationInvoice.phone ?  customerInformationInvoice.phone : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>传真：</span>{{ customerInformationInvoice.fax ?  customerInformationInvoice.fax : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>美元开户银行名称：</span>{{ customerInformationInvoice.usBankAccountName ?  customerInformationInvoice.usBankAccountName : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>美元开户银行账号：</span>{{ customerInformationInvoice.usBankAccount ?  customerInformationInvoice.usBankAccount : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>开户银行名称：</span>{{ customerInformationInvoice.cnBankAccountName ?  customerInformationInvoice.cnBankAccountName : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>开户银行账号：</span>{{ customerInformationInvoice.cnBankAccount ?  customerInformationInvoice.cnBankAccount : '暂无'}}
            </el-col>
          </el-row>
        </div>
      </template>
      <template v-if="type == 'supplier'">
        <ul class="tabs mt30">
          <li @click="current = 0" :class="{ active: current === 0 }">基础资料</li>
          <li @click="current = 1" :class="{ active: current === 1 }">证件资料</li>
          <li @click="current = 2" :class="{ active: current === 2 }">发票地址</li>
        </ul>
        <div v-show="current === 0">
          <el-row class="detail-item">
            <el-col :span="8">
                <span>供应商编码：</span>{{ data.supCode ?  data.supCode : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>供应商名称：</span>{{ data.name ?  data.name : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>供应商简称：</span>{{ data.shortName ?  data.shortName : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>外文名称：</span>{{ data.englishName ?  data.englishName : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>供应商助记码：</span>{{ data.mnemonicCode ?  data.mnemonicCode : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>法人：</span>{{ data.legalPerson ?  data.legalPerson : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>供应商分类：</span>{{ data.sortId ?  data.sortId : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>供应商类型：</span>{{ data.supType == '0' ? '代理商' : data.supType == '1' ? '生产商' : '承运商' }}
            </el-col>
            <el-col :span="8" v-if="data.supType == '0'">
                <span>生产商：</span>{{ data.typeLink }}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>联系人：</span>{{ data.contact ?  data.contact : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>联系电话：</span>{{ data.contactTel ?  data.contactTel : '暂无'}}
            </el-col>
            <el-col :span="8">
              <span>营业执照编号：</span>{{ data.businessLicense ?  data.businessLicense : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
              <span>邮政编码：</span>{{ data.zipCode ?  data.zipCode : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>电子邮件：</span>{{ data.email ?  data.email : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>网址：</span>{{ data.url ?  data.url : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="24">
              <span>公司注册地址：</span>{{ data.province ? data.province : '暂无' }}{{ data.city ? data.city : '' }}{{ data.zone ? data.zone : '' }}{{ data.address ? data.address : '' }}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
              <span>备注：</span>{{ data.remark ?  data.remark : '暂无'}}
            </el-col>
            <el-col :span="8">
              <span>状态：</span>
              <!-- {{ data.status == '0' ? '暂无' : data.status == '1' ? '正常' : '禁用'}} -->
              <font v-if="data.status == 2" style="color:#fd562c">禁用</font>
              <font v-if="data.status == 1" style="color:#52C41A">正常</font>
            </el-col>
            <el-col :span="8">
              <span>审核状态：</span>
              <!-- {{ data.approveStatus == '0' ? '待审核' : data.approveStatus == '1' ? '已审核' : data.approveStatus == '3' ? '拒绝' : data.approveStatus == '2' ? '反审核' : '草稿' }} -->
              <font v-if="data.approveStatus == 0" style="color:#13C2C2">待审核</font>
              <font v-if="data.approveStatus == 1" style="color:#52C41A">已审核</font>
              <font v-if="data.approveStatus == 2" style="color:#fd562c">反审核</font>
              <font v-if="data.approveStatus == 3" style="color:#fd562c">拒绝</font>
            </el-col>
          </el-row>
        </div>
        <div v-show="current === 1">
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">营业执照</div>
              <div class="avatar-uploader">
                <div v-if="typeList11">
                  <img v-if="typeList11.fileType == '.jpg' || typeList11.fileType == '.png' || typeList11.fileType == '.gif' || typeList11.fileType == '.bmp' || typeList11.fileType == 'jpeg'" :src="typeList11.fileUrl" class="avatar">
                  <span v-else>{{ typeList11.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList11.startTime ? typeList11.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList11.endTime ? typeList11.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">医疗器械法规要求<br />(安全性证明文件)</div>
              <div class="avatar-uploader">
                <div v-if="typeList1">
                  <img v-if="typeList1.fileType == '.jpg' || typeList1.fileType == '.png' || typeList1.fileType == '.gif' || typeList1.fileType == '.bmp' || typeList1.fileType == 'jpeg'" :src="typeList1.fileUrl" class="avatar">
                  <span v-else>{{ typeList1.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList1.startTime ? typeList1.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList1.endTime ? typeList1.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">医疗器械法规要求<br />(生产环境证明文件)</div>
              <div class="avatar-uploader">
                <div v-if="typeList2">
                  <img v-if="typeList2.fileType == '.jpg' || typeList2.fileType == '.png' || typeList2.fileType == '.gif' || typeList2.fileType == '.bmp' || typeList2.fileType == 'jpeg'" :src="typeList2.fileUrl" class="avatar">
                  <span v-else>{{ typeList2.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList2.startTime ? typeList2.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList2.endTime ? typeList2.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">进口原料检疫报告</div>
              <div class="avatar-uploader">
                <div v-if="typeList3">
                  <img v-if="typeList3.fileType == '.jpg' || typeList3.fileType == '.png' || typeList3.fileType == '.gif' || typeList3.fileType == '.bmp' || typeList3.fileType == 'jpeg'" :src="typeList3.fileUrl" class="avatar">
                  <span v-else>{{ typeList3.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList3.startTime ? typeList3.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList3.endTime ? typeList3.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">产品质量标准</div>
              <div class="avatar-uploader">
                <div v-if="typeList4">
                  <img v-if="typeList4.fileType == '.jpg' || typeList4.fileType == '.png' || typeList4.fileType == '.gif' || typeList4.fileType == '.bmp' || typeList4.fileType == 'jpeg'" :src="typeList4.fileUrl" class="avatar">
                  <span v-else>{{ typeList4.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList4.startTime ? typeList4.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList4.endTime ? typeList4.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">执照电子档</div>
              <div class="avatar-uploader">
                <div v-if="typeList5">
                  <img v-if="typeList5.fileType == '.jpg' || typeList5.fileType == '.png' || typeList5.fileType == '.gif' || typeList5.fileType == '.bmp' || typeList5.fileType == 'jpeg'" :src="typeList5.fileUrl" class="avatar">
                  <span v-else>{{ typeList5.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList5.startTime ? typeList5.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList5.endTime ? typeList5.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">供方调查表</div>
              <div class="avatar-uploader">
                <div v-if="typeList6">
                  <img v-if="typeList6.fileType == '.jpg' || typeList6.fileType == '.png' || typeList6.fileType == '.gif' || typeList6.fileType == '.bmp' || typeList6.fileType == 'jpeg'" :src="typeList6.fileUrl" class="avatar">
                  <span v-else>{{ typeList6.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList6.startTime ? typeList6.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList6.endTime ? typeList6.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">生产许可证</div>
              <div class="avatar-uploader">
                <div v-if="typeList7">
                  <img v-if="typeList7.fileType == '.jpg' || typeList7.fileType == '.png' || typeList7.fileType == '.gif' || typeList7.fileType == '.bmp' || typeList7.fileType == 'jpeg'" :src="typeList7.fileUrl" class="avatar">
                  <span v-else>{{ typeList7.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList7.startTime ? typeList7.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList7.endTime ? typeList7.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">产品授权书</div>
              <div class="avatar-uploader">
                <div v-if="typeList8">
                  <img v-if="typeList8.fileType == '.jpg' || typeList8.fileType == '.png' || typeList8.fileType == '.gif' || typeList8.fileType == '.bmp' || typeList8.fileType == 'jpeg'" :src="typeList8.fileUrl" class="avatar">
                  <span v-else>{{ typeList8.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList8.startTime ? typeList8.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList8.endTime ? typeList8.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">质量认证体系证书</div>
              <div class="avatar-uploader">
                <div v-if="typeList9">
                  <img v-if="typeList9.fileType == '.jpg' || typeList9.fileType == '.png' || typeList9.fileType == '.gif' || typeList9.fileType == '.bmp' || typeList9.fileType == 'jpeg'" :src="typeList9.fileUrl" class="avatar">
                  <span v-else>{{ typeList9.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList9.startTime ? typeList9.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList9.endTime ? typeList9.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
          <el-row class="display">
            <el-col :span="8" class="display">
              <div class="upload-title">产品的工艺流程图</div>
              <div class="avatar-uploader">
                <div v-if="typeList10">
                  <img v-if="typeList10.fileType == '.jpg' || typeList10.fileType == '.png' || typeList10.fileType == '.gif' || typeList10.fileType == '.bmp' || typeList10.fileType == 'jpeg'" :src="typeList10.fileUrl" class="avatar">
                  <span v-else>{{ typeList10.fileName }}</span>
                </div>
                <p v-else>暂无</p>
              </div>
            </el-col>
            <el-col :span="8">
              开始日期：<span>{{ typeList10.startTime ? typeList10.startTime : '暂无' }}</span>
            </el-col>
            <el-col :span="8">
              结束日期：<span>{{ typeList10.endTime ? typeList10.endTime : '暂无' }}</span>
            </el-col>
          </el-row>
        </div>
        <div v-show="current === 2">
          <el-row class="detail-item">
            <el-col :span="8">
              <span>公司名称（中文）：</span>{{ shareInvoice.companyName ?  shareInvoice.companyName : '暂无'}}
            </el-col>
            <el-col :span="8">
              <span>公司名称（英文）：</span>{{ shareInvoice.companyEnName ?  shareInvoice.companyEnName : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="24">
              <span>公司注册地址：</span>{{ shareInvoice.addressCountry ?  shareInvoice.addressCountry : '暂无'}}{{ shareInvoice.addressProvince ? shareInvoice.addressProvince : '' }}{{ shareInvoice.addressCity ? shareInvoice.addressCity : '' }}{{ shareInvoice.addressRegion ? shareInvoice.addressRegion : '' }}{{ shareInvoice.addressDetailed ? shareInvoice.addressDetailed : '' }}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="24">
              <span>纳税人类型：</span>{{ shareInvoice.taxpayerType == '0' ? '增值税一般纳税人' : shareInvoice.taxpayerType == '1' ? '增值税小规模纳税人' : shareInvoice.taxpayerType == '2' ? '营业纳税人' : '暂无' }}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="24">
              <span>纳税类型比例：</span>{{ shareInvoice.taxpayerScale == '0' ? '13%' : shareInvoice.taxpayerScale == '1' ? '9%' : shareInvoice.taxpayerScale == '2' ? '6%' : shareInvoice.taxpayerScale == '3' ? '3%' : shareInvoice.taxpayerScale == '4' ? '1%' : '暂无'}}
            </el-col>
          </el-row>
        </div>
      </template>
      <template v-if="type == 'product'">
        <ul class="tabs" style="width:440px;">
          <li @click="current = 0" :class="{ active: current === 0 }">基本信息</li>
          <li @click="current = 1" :class="{ active: current === 1 }">采购信息</li>
          <li @click="current = 2" :class="{ active: current === 2 }">销售信息</li>
          <li @click="current = 3" :class="{ active: current === 3 }">库存设置</li>
        </ul>
        <div v-show="current === 0">
          <el-row class="detail-item">
            <el-col :span="8">
                <span>产品编码：</span>{{ data.productCode ?  data.productCode : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>产品名称：</span>{{ data.productName ?  data.productName : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>简称：</span>{{ data.shortName ?  data.shortName : '暂无'}}
            </el-col>
            <el-col :span="16">
                <span>产品图片：</span>
                <div style="width:100%;">
                  <template v-if="JSON.stringify(data.shareFiles) !== '[]'">
                    <div v-for="item in data.shareFiles" :key="item.id" class="item-img">
                      <img :src="item.fileUrl">
                    </div>
                  </template>
                  <template v-else>暂无</template>
                </div>
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>英文名称：</span>{{ data.enName ?  data.enName : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>助记码：</span>{{ data.mnemonicCode ?  data.mnemonicCode : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>成本核算：</span>{{ data.costAccounting ?  data.costAccounting : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>版本号：</span>{{ data.version ?  data.version : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
              <span>产品属性：</span>{{ data.productProperties == '1' ? '外购' : data.productProperties == '2' ? '自制产成品' : data.productProperties == '3' ? '自制半成品' : '暂无'}}
            </el-col>
            <el-col :span="8">
              <span>价格类型：</span>{{ data.priceType == '0' ? '未税单价' : data.priceType == '1' ? '含税单价' : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
              <span>是否启用批次：</span>{{ data.enableBatches == 0 ?  '启用' : '禁用'}}
            </el-col>
            <el-col :span="8">
              <span>是否启用扫码：</span>{{ data.serialNumber == 0 ?  '启用' : '禁用'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
              <span>产品分类：</span>{{ data.productClassification ?  data.productClassification : '暂无'}}
            </el-col>
            <el-col :span="8">
              <span>品牌：</span>{{ data.brand ?  data.brand : '暂无'}}
            </el-col>
          </el-row>
          <!-- 规格 -->
          <el-row class="mt30">
            <el-col :span="24" style="border:1px solid #ddd;" v-if="data.isSingle == '1'">
              <div class="specification">
                <span>SKU编码</span>
                <span>销售价</span>
                <span>采购价</span>
                <span>成本价</span>
                <span>图片</span>
                <span>描述</span>
              </div>
              <div class="specification">
                <span>{{ data.specificationCode }}</span>
                <span>{{ data.sellingPrice }}</span>
                <span>{{ data.purchasePrice }}</span>
                <span>{{ data.costPrice }}</span>
                <span v-if="data.imgUrl"><img :src="data.imgUrl" width="50" height="50"></span>
                <span v-else></span>
                <span>{{ data.description }}</span>
              </div>
            </el-col>
            <el-col :span="24" style="border:1px solid #ddd;" v-else>
              <div class="specification">
                <span>SKU编码</span>
                <span>SKU名称</span>
                <span v-if="data.title1">{{ data.title1 }}</span>
                <span v-if="data.title2">{{ data.title2 }}</span>
                <!-- <span>规格1</span>
                <span>规格参数1</span>
                <span>规格2</span>
                <span>规格参数2</span> -->
                <span>销售价</span>
                <span>成本价</span>
                <span>图片</span>
                <!-- <span>品牌</span> -->
                <span>是否启用扫码</span>
                <span>描述</span>

                <span>SKU编码</span>
                <span>SKU名称</span>
                <span v-if="data.title1">{{ data.title1 }}</span>
                <span v-if="data.title2">{{ data.title2 }}</span>
                <!-- <span>规格1</span>
                <span>规格参数1</span>
                <span>规格2</span>
                <span>规格参数2</span> -->
                <span>销售价</span>
                <span>采购价</span>
                <span>成本价</span>
                <span>图片</span>
                <!-- <span>品牌</span> -->
                <span>是否启用批次</span>
                <span>是否启用扫码</span>
                <span>描述</span>
                <span>产品标识</span>
                <span>箱规</span>
                <span>箱码标识</span>
                <span>大码规格</span>
                <span>大码标识</span>
              </div>
              <div class="specification">
                <span>{{ data.specificationCode }}</span>
                <span>{{ data.specificationName }}</span>
                <!-- <span>{{ data.title1 }}</span> -->
                <span v-if="data.value1">{{ data.value1 }}</span>
                <!-- <span>{{ data.title2 }}</span> -->
                <span v-if="data.value2">{{ data.value2 }}</span>
                <span>{{ data.sellingPrice }}</span>
                <span>{{ data.purchasePrice }}</span>
                <span>{{ data.costPrice }}</span>
                <span v-if="data.imgUrl"><img :src="data.imgUrl" width="50" height="50"></span>
                <span v-else></span>
                <!-- <span>{{ data.brandId }}</span> -->
                <span>{{ data.isSerial == '1' ? '禁用' : '启用' }}</span>
                <span>{{ data.enableBatches == '1' ? '禁用' : '启用' }}</span>
                <span>{{ data.description }}</span>
                <span>{{ data.productIdentification }}</span>
                <span>{{ data.standardBoxGauge }}</span>
                <span>{{ data.boxCodeIdentification }}</span>
                <span>{{ data.largeSizeSpecifications }}</span>
                <span>{{ data.largeSizeIdentification }}</span>
              </div>
            </el-col>
          </el-row>
          <!--  -->
          <el-row class="detail-item">
            <el-col :span="8">
                <span>产品注册证号：</span>{{ data.registrationNumber ?  data.registrationNumber : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>有效天数：</span>{{ data.validDate ?  data.validDate : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>可组装/拆卸：</span>{{ data.assembly == 0 ?  '是' : '否'}}
            </el-col>
            <el-col :span="8">
                <span>成本价：</span>{{ data.costPrice ?  data.costPrice : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>单位：</span>{{ data.unit ?  data.unit : '暂无'}}
            </el-col>
            <el-col :span="8">
              <span>箱规：</span>{{ data.boxGauge ?  data.boxGauge : '暂无' }}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
              <span>审核状态：</span>
              <font v-if="data.approvalStatus == 0" style="color:#13C2C2">草稿</font>
              <font v-if="data.approvalStatus == 1" style="color:#13C2C2">待审核</font>
              <font v-if="data.approvalStatus == 2" style="color:#52C41A">已审核</font>
              <font v-if="data.approvalStatus == 3" style="color:#fd562c">拒绝</font>
            </el-col>
            <el-col :span="8">
              <span>状态：</span>
              <font v-if="data.productStatus == 0" style="color:#fd562c">禁用</font>
              <font v-if="data.productStatus == 1" style="color:#52C41A">正常</font>
            </el-col>
          </el-row>
        </div>
        <div v-show="current === 1">
          <el-row class="detail-item">
            <el-col :span="8">
                <span>采购价格：</span>{{ data.purchasePrice ?  data.purchasePrice : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>采购最高限价：</span>{{ data.purchasePriceMax ?  data.purchasePriceMax : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>采购限额数量：</span>{{ data.purchaseNum ?  data.purchaseNum : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>采购限额金额：</span>{{ data.purchasePriceMin ?  data.purchasePriceMin : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>采购提前期（天）：</span>{{ data.procurementLeadTime ?  data.procurementLeadTime : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>下单提前期（天）：</span>{{ data.orderLeadTime ?  data.orderLeadTime : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>最小起订量：</span>{{ data.minimumOrderQuantity ?  data.minimumOrderQuantity : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>最大数量限制：</span>{{ data.maximumOrderQuantity ?  data.maximumOrderQuantity : '暂无'}}
            </el-col>
          </el-row>
          <el-row class="detail-item">
            <el-col :span="8">
                <span>采购员：</span>{{ data.buyer ?  data.buyer : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>采购供应商：</span>{{ data.purchasingSuppliers ?  data.purchasingSuppliers : '暂无'}}
            </el-col>
          </el-row>
        </div>
        <div v-show="current === 2">
          <el-row class="detail-item">
            <el-col :span="8">
                <span>销售价格：</span>{{ data.productSellingPrice ?  data.productSellingPrice : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>配送天数：</span>{{ data.deliveryDays ?  data.deliveryDays : '暂无'}}
            </el-col>
          </el-row>
        </div>
        <div v-show="current === 3">
          <el-row class="detail-item">
            <el-col :span="8">
                <span>最大安全库存：</span>{{ data.maximumStock ?  data.maximumStock : '暂无'}}
            </el-col>
            <el-col :span="8">
                <span>最小安全库存：</span>{{ data.minimumStock ?  data.minimumStock : '暂无'}}
            </el-col>
          </el-row>
        </div>
      </template>
    </div>
    <!-- 审核/反审核 -->
    <el-dialog :visible.sync="open" width="500" top="100px" append-to-body title="审核意见" center>
      <el-row>
        <el-col :span="24">
          <textarea
            class="approve-textarea"
            v-model="approveRemark"
            type="textarea"
            placeholder="请输入意见和看法"
          >
          </textarea>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          class="btn-success mr20 width100"
          @click="agreeApprove()"
        >同意</el-button>
        <el-button
          type="primary"
          class="btn-cancel width100"
          @click="disagreeApprove()"
        >拒绝</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detailUser, deleteUser, enableUser, approveUser, unApproveUser } from "@/api/system/basedata/user/user"
import { listUserList } from "@/api/system/basedata/userlist/userlist"
import { listSalesArea } from "@/api/system/basedata/salesarea/salesarea"
export default {
  name: "detail",
  data(){
    return {
      id: '',
      type: '',
      data: '',
      customerInformationInvoice: '',
      shareInvoice: '',
      current: 0,
      typeList1: {},
      typeList2: {},
      typeList3: {},
      typeList4: {},
      typeList5: {},
      typeList6: {},
      typeList4: {},
      typeList7: {},
      typeList8: {},
      typeList9: {},
      typeList10: {},
      typeList11: {},
      open: false,
      approveRemark: '',
    }
  },
  created() {
    this.id = this.$route.query.id
    // 类型 user supplier product
    this.type = this.$route.query.type
    if(this.$route.query.data){
      this.data = this.$route.query.data
      // 是否获取到供应商发票地址
      if(this.$route.query.data.shareInvoice){
        this.shareInvoice = this.$route.query.data.shareInvoice
      }
      // 是否获取到数据
      if(this.data && Object.prototype.toString.call(this.data) !== '[object Object]'){
        if(this.type == 'supplier'){
          this.$tab.closeOpenPage({ path: "/basicData/supplier" })
        }else if(this.type == 'product'){
          this.$tab.closeOpenPage({ path: "/basicData/product" })
        }
        this.$modal.msgError('未获取到查询数据！')
      }else{
        this.getDetailData()
      }
    }else{
      this.getDetailData()
    }
  },
  methods: {
    // 获取数据
    getDetailData() {
      // 客户
      if(this.type == 'user'){
        detailUser(this.id).then(res => {
          this.data = res.data
          this.customerInformationInvoice = res.data.customerInformationInvoice == null ? '' : res.data.customerInformationInvoice
          this.getDetailUpload()
          this.getUserList()
          this.getSalesArea()
        })
      }
      // 供应商
      else if(this.type == 'supplier'){
        this.getDetailUpload()
      }
      // 产品
      else if(this.type == 'product'){
        // console.log('product')
      }
    },
    // 转换图片
    getDetailUpload(){
      if(this.type == 'user'){
        let arr1 = this.data.customerInformationFileList.find((item) => {
          return item.type == 1
        })
        let arr2 = this.data.customerInformationFileList.find((item) => {
          return item.type == 2
        })
        let arr3 = this.data.customerInformationFileList.find((item) => {
          return item.type == 3
        })
        let arr4 = this.data.customerInformationFileList.find((item) => {
          return item.type == 4
        })
        this.typeList1 = arr1 == undefined ? '' : arr1
        this.typeList2 = arr2 == undefined ? '' : arr2
        this.typeList3 = arr3 == undefined ? '' : arr3
        this.typeList4 = arr4 == undefined ? '' : arr4
      }else if(this.type == 'supplier'){
        if(this.data.fileList !== null){
          let arr1 = this.data.fileList.find((item) => {
            return item.type == 'SUP002'
          })
          let arr2 = this.data.fileList.find((item) => {
            return item.type == 'SUP003'
          })
          let arr3 = this.data.fileList.find((item) => {
            return item.type == 'SUP004'
          })
          let arr4 = this.data.fileList.find((item) => {
            return item.type == 'SUP005'
          })
          let arr5 = this.data.fileList.find((item) => {
            return item.type == 'SUP006'
          })
          let arr6 = this.data.fileList.find((item) => {
            return item.type == 'SUP007'
          })
          let arr7 = this.data.fileList.find((item) => {
            return item.type == 'SUP008'
          })
          let arr8 = this.data.fileList.find((item) => {
            return item.type == 'SUP009'
          })
          let arr9 = this.data.fileList.find((item) => {
            return item.type == 'SUP010'
          })
          let arr10 = this.data.fileList.find((item) => {
            return item.type == 'SUP011'
          })
          let arr11 = this.data.fileList.find((item) => {
            return item.type == 'SUP001'
          })
          this.typeList1 = arr1 == undefined ? '' : arr1
          this.typeList2 = arr2 == undefined ? '' : arr2
          this.typeList3 = arr3 == undefined ? '' : arr3
          this.typeList4 = arr4 == undefined ? '' : arr4
          this.typeList5 = arr5 == undefined ? '' : arr5
          this.typeList6 = arr6 == undefined ? '' : arr6
          this.typeList7 = arr7 == undefined ? '' : arr7
          this.typeList8 = arr8 == undefined ? '' : arr8
          this.typeList9 = arr9 == undefined ? '' : arr9
          this.typeList10 = arr10 == undefined ? '' : arr10
          this.typeList11 = arr11 == undefined ? '' : arr11
        }
      }
    },
    // 获取客户分类
    getUserList() {
      listUserList().then(res => {
        let arr = res.data.find(item => {
          return item.sortId == this.data.customerSortId
        })
        if(arr != undefined){
          this.data.customerSortId = arr.sortName
        }
      })
    },
    // 获取销售区域
    getSalesArea(){
      listSalesArea().then(res => {
        let arr = res.rows.find(item =>{
          return item.areaId == this.data.salesArea
        })
        if(arr != undefined){
          this.data.salesArea = arr.areaName
        }
      })
    },
    // 编辑
    userEdit(){
      this.$tab.closeOpenPage({ path: "/customer/user/edit", query:{id: this.id} })
    },
    // 审核
    userAudit(){
      this.open = true
    },
    agreeApprove(){
      approveUser(this.id, 2, this.approveRemark).then(res => {
        // console.log(res)
        if(res.code == 200){
            this.getDetailData()
            this.open = false
            this.$modal.msgSuccess("操作成功")
        }
      })
    },
    disagreeApprove(){
      approveUser(this.id, 3, this.approveRemark).then(res => {
        if(res.code == 200){
            this.getDetailData()
            this.open = false
            this.$modal.msgSuccess("操作成功")
        }
      })
    },
    // 反审核
    userReverseAudit(){
      this.$modal.confirm('是否确认反审核？', '反审核').then(() => {
        unApproveUser(this.id, 0).then(res => {
          // console.log(res)
          if(res.code == 200){
            this.getDetailData()
            this.$modal.msgSuccess("操作成功")
          }
        })
      }).catch(() => {})
    },
    // 启用
    userEnable(){
      this.$modal.confirm('是否确认启用？', '启用').then(() => {
        enableUser(this.id, 1).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("启用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    },
    // 禁用
    userDisable(){
      this.$modal.confirm('是否确认禁用？', '禁用').then(() => {
        enableUser(this.id, 0).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("禁用成功")
            this.getDetailData()
          }
        })
      }).catch(() => {})
    },
    // 删除
    userDelete() {
      this.$modal.confirm('是否确认删除当前数据？', '删除').then(() => {
        deleteUser(this.id).then(res => {
          if(res.code == 200){
            this.$modal.msgSuccess("删除成功")
            this.$tab.closeOpenPage({ path: "/customer/user/user" })
          }
        })
      }).catch(() => {})
    }
  }
}
</script>

<style scoped>
.upload-title{
  width: 140px;
  padding-right: 10px;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
  text-align: right;
}
.avatar-uploader{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  width: 178px;
  height: 178px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
}
.avatar {
  width: 178px;
  display: block;
}
.item-img{
  float: left;
  margin:0 10px 10px 0;
  width: 145px;
  height: 145px;
  overflow: hidden;
}
.item-img:nth-child(4n){
  margin: 0 0 10px;
}
.item-img img{
  width: 100%;
}
.specification{
  display: flex;
  align-items: center;
  padding: 10px 0 10px 50px;
  font-size: 14px;
  color: #222;
  border-bottom: 1px solid #dfe6ec;
}
.specification:last-child{
  border-bottom: none;
}
.specification span:first-child{
  flex: 150px 0 0;
  text-align: left;
  max-width: 150px;
}
/* .specification span:last-child{
  flex: 150px 0 0;
} */
.specification span{
  flex: 1;
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  word-wrap: break-word;
}
</style>